<template>
    <view>
        <uni-segmented-control :current="menuIndex" :values="menuItems" style-type="text" active-color="#007aff" @clickItem="onClickItem" />
        <uni-list>
            <view v-if="menuIndex === 0">
                <uni-list-item ellipsis="3" v-for="(item, index) in fissionOrder" :key="index" :thumb="item.cust?.ciAvat" thumb-size="lg">
                    <template v-slot:body style="flex: 1">
                        <view style="font-size: 16px; font-weight: 600">{{ (item.cust?.ciName || "") + (item.cust?.ciAlia ? "(" + item.cust?.ciAlia + ")" : "") + item.cust?.ciPhon }}</view>
                        <view style="font-size: 12px; color: dimgrey">{{ item.soItin?.giName }}</view>
                        <!-- <view style="font-size: 12px; color: dimgrey">{{ item.sharecust?.ciAlia ? "分享客户：" + item.sharecust.ciAlia + item.sharecust.ciPhon : "" }}</view> -->
                        <view style="font-size: 12px; color: dimgrey">{{ item.staff?.orName ? "所属员工：" + item.staff.orName : "" }}</view>
                    </template>
                    <template v-slot:footer>
                        <view style="text-align: right">
                            <view><uni-tag type="error" size="small" :text="item.soStat"></uni-tag></view>
                            <view style="margin-top: 8px; font-size: 12px">{{ "¥" + numberFormat(item.soPric, 0) }}/金额</view>
                            <view style="margin-top: 0px; font-size: 12px">{{ "¥" + numberFormat(item.soDisc, 0) }}/优惠</view>
                        </view>
                    </template>
                </uni-list-item>
            </view>
    
            <view v-if="menuIndex === 1">
                <uni-list-item v-for="(item, index) in fissionOrder" :key="index" :thumb="item.cust?.ciAvat" thumb-size="lg">
                    <template v-slot:body style="flex: 1">
                        <view style="font-size: 16px; font-weight: 600">{{ (item.cust?.ciName || "") + (item.cust?.ciAlia ? "(" + item.cust?.ciAlia + ")" : "") + item.cust?.ciPhon }}</view>
                        <view style="font-size: 12px; color: dimgrey">{{ item.soItin?.giName }}</view>
                        <!-- <view style="font-size: 12px; color: dimgrey">{{ item.sharecust?.ciAlia ? "分享客户：" + item.sharecust.ciAlia + item.sharecust.ciPhon : "" }}</view> -->
                        <view style="font-size: 12px; color: dimgrey">{{ item.staff?.orName ? "所属员工：" + item.staff.orName : "" }}</view>
                    </template>
                    <template v-slot:footer>
                        <view style="text-align: right">
                            <view><uni-tag type="error" size="small" :text="item.soStat"></uni-tag></view>
                            <view style="margin-top: 8px; font-size: 12px">{{ "¥" + numberFormat(item.soPric, 0) }}/金额</view>
                            <view style="margin-top: 0px; font-size: 12px">{{ "¥" + numberFormat(item.soDisc, 0) }}/优惠</view>
                        </view>
                    </template>
                </uni-list-item>
            </view>
    
            <view v-if="menuIndex === 2">
                <uni-list-item v-for="(item, index) in fissionOrder" :key="index" :thumb="item.cust?.ciAvat" thumb-size="lg">
                    <template v-slot:body style="flex: 1">
                        <view style="font-size: 16px; font-weight: 600">{{ (item.cust?.ciName || "") + (item.cust?.ciAlia ? "(" + item.cust?.ciAlia + ")" : "") + item.cust?.ciPhon }}</view>
                        <view style="font-size: 12px; color: dimgrey">{{ item.soItin?.giName }}</view>
                        <!-- <view style="font-size: 12px; color: dimgrey">{{ item.sharecust?.ciAlia ? "分享客户：" + item.sharecust.ciAlia + item.sharecust.ciPhon : "" }}</view> -->
                        <view style="font-size: 12px; color: dimgrey">{{ item.staff?.orName ? "所属员工：" + item.staff.orName : "" }}</view>
                    </template>
                    <template v-slot:footer>
                        <view style="text-align: right">
                            <view><uni-tag type="default" size="small" :text="item.soStat"></uni-tag></view>
                            <view style="margin-top: 8px; font-size: 12px">{{ "¥" + numberFormat(item.soPric, 0) }}/金额</view>
                            <view style="margin-top: 0px; font-size: 12px">{{ "¥" + numberFormat(item.soDisc, 0) }}/优惠</view>
                        </view>
                    </template>
                </uni-list-item>
            </view>
        </uni-list>
    </view>
</template>

<script>
    import { getOrdersBySoScid } from "../../utils/api";
    import { mapGetters } from "vuex";
    
    export default {
        data() {
            return {
                fissionOrder: [],
                soScid: '',
                menuItems: ["待支付", "已支付", "已取消"],
                menuIndex: 0,
            }
        },
        computed: {
            ...mapGetters({
                activity: "activityInfo/activity",
            }),
        },
        onLoad(params) {
            if (params.ciUuid) {
                this.soScid = params.ciUuid;
                this.loadFissionOrders({ soScid: params.ciUuid, soFrid: this.activity.gpUuid, soStat: "待支付"})
            }
        },
        methods: {
            async loadFissionOrders({soScid, soFrid, soStat}) {
                let res = await getOrdersBySoScid({
                    soScid,
                    soFrid,
                    soStat
                })
                if (res) this.fissionOrder = res || [];
            },
            onClickItem(e) {
                if (this.menuIndex !== e.currentIndex) {
                    this.menuIndex = e.currentIndex;
                    if (e.currentIndex == 0) {
                        this.loadFissionOrders({ soScid: this.soScid, soFrid: this.activity?.gpUuid, soStat: "待支付" });
                    }
                    if (e.currentIndex == 1) {
                        this.loadFissionOrders({ soScid: this.soScid, soFrid: this.activity?.gpUuid, soStat: "已支付" });
                    }
                    if (e.currentIndex == 2) {
                        this.loadFissionOrders({ soScid: this.soScid, soFrid: this.activity?.gpUuid, soStat: "已取消" });
                    }
                }
            },
        }
    }
</script>

<style>
</style>